<template>
	<view class="content">
		<view class="input-border">
			<input class="input-exam" type="text" @input="search" placeholder="请输入您孩子的id" placeholder-style="background-image:url('../../static/image/search.png');background-repeat:no-repeat;background-position: 25% 50%;text-align:center;" />
		</view>
		<view class="cont" v-if="schoolName != null" @click="type =! type">
			<view class="children-left">
				<headimg :realSrc="avatar"></headimg>
				<view class="childmsg">
					<view class="stumsg">{{nicheng}}</view>
					<view class="schoolmsg">{{schoolName}}</view>
				</view>
			</view>
			<view class="radio-stu">
				<radio value="child" color="#FF9900" :checked="type" />
			</view>
		</view>
		<view class="button" v-if="schoolName != null && type" @click="bind">确认并绑定</view>
		<view class="contNone" v-if="schoolName == null">您需要先输入孩子的id进行搜索</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			headimg
		},
		data() {
			return {
				avatar: this.defimg,
				identifier: '',
				nicheng: '未设置昵称',
				schoolName: null,
				type: false
			}
		},
		methods: {
			/* 搜索 */
			search(e) {
				this.identifier = e.target.value;
				this.childList();
			},
			/* 搜索列表 */
			childList() {
				var data = {
					identifier: this.identifier
				}
				this.$zapi.apiPost('user/currency.Parents/ChildrenSearch', data).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						this.avatar = data.avatar;
						this.nicheng = data.nicheng ? data.nicheng : '未设置昵称';
						if (data.school_info && data.school_info.length > 0 && data.school_info[0].schoolid > 0) {
							let school = data.school_info[0]
							var gradeName = school.grade ? util.getgradeName(school.grade) : '未知年级';
							var schoolName = school.school_name ? school.school_name : '未知学校';
							this.schoolName = school.class_name ? schoolName + '（' + gradeName +
								school.class_name + '）' : schoolName + '（未加入班级）';
						} else {
							this.schoolName = '未绑定学校';
						}
					} else {
						this.schoolName = null;
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/* 绑定孩子 */
			bind() {
				var data = {
					identifier: this.identifier
				}
				if (this.type) {
					this.$zapi.apiPost('user/currency.Parents/BindingChildren', data).then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(function() {
							uni.redirectTo({
								url: 'child-detail'
							})
						}, 1000);
					})
				} else {
					uni.showToast({
						title: '请先选择需要绑定的孩子',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.content {
		width: 100%;
		position: absolute;
		padding-bottom: 110upx;
	}

	.input-border {
		width: 100%;
		height: 100upx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.input-exam {
		width: 650upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 6upx;
		background: #FAFAFA;
		margin-top: 20upx;
		padding-left: 20upx;
	}

	.cont {
		padding: 40upx 20upx 40upx 40upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10upx;
		margin-top: 10upx;
		background-color: #FFFFFF;

		.children-left {
			width: 89%;
			display: flex;

			.head_image {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
			}

			.childmsg {
				color: #333333;
				margin-left: 20upx;
				width: calc(100% - 100upx);

				.stumsg {
					color: #333333;
					font-size: 34upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.schoolmsg {
					color: #666666;
					font-size: 26upx;
				}
			}
		}

		.radio-stu {
			radio {
				transform: scale(0.7);
			}
		}
	}

	.button {
		margin: 90upx 30upx 0;
		background: #FF9900;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 8upx;
	}

	.contNone {
		color: #999999;
		text-align: center;
		margin-top: 40upx;
	}
</style>
